<template>
	<view class="newcomerBenefits">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar 
		color="#FFF"
		bgColor="#EC4141">
			<image :slot="'left'"
				:src="xcxImgUrl && xcxImgUrl+'page_activity/static/fanhui_FFF.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">新人福利</text>
		</navBar>
		
		<!-- 主体 -->
		<scroll-view 
		class="main_newcomerBenefits pd10"
		:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
		scroll-y>
			<view class="main_newcomerBenefits_top">
				<view class="main_newcomerBenefits_top_left">
					<image
					 style="width: 300rpx;height: 80rpx;"
					 :src="xcxImgUrl && xcxImgUrl+'page_activity/static/xryl_zi.png'"></image>
					 <text>各种好礼,等你来领</text>
				</view>
				<view class="main_newcomerBenefits_top_right">
					<image 
					mode="aspectFill"
					style="width: 100%;height: 70%;"
					:src="xcxImgUrl && xcxImgUrl+'page_activity/static/xrfl_top.png'"></image>
				</view>
				
			</view>
			<view class="main_newcomerBenefits_yhj mt10 pd10">
				<view class="main_newcomerBenefits_yhj_top">
					<text class="main_newcomerBenefits_yhj_top_left">新人专享优惠劵</text>
					<text @click="toCardRoll" class="main_newcomerBenefits_yhj_top_right">我的优惠劵>></text>
				</view>
				<view class="main_newcomerBenefits_yhj_content mt10">
					<view class="main_newcomerBenefits_yhj_content_left">
						<text class="main_newcomerBenefits_yhj_content_left_left">￥</text>
						<text class="main_newcomerBenefits_yhj_content_left_right">80</text>
					</view>
					<view class="main_newcomerBenefits_yhj_content_right pd_left10">
						<text class="main_newcomerBenefits_yhj_content_right_one">新人无门槛优惠劵</text>
						<text  class="main_newcomerBenefits_yhj_content_right_tow">全类品使用</text>
						<text  class="main_newcomerBenefits_yhj_content_right_three">有效期致:2025-12-45 12:45:00</text>
					</view>
				</view>
				<view
				@click="tapLinjuan" 
				v-if="!linjuanShow"
				 class="mt10 mb10">
					<newBtn 
					bgColor="#EC4141" 
					color="#FFF" 
					name="领卷"></newBtn>
				</view>
				<view 
				v-if="linjuanShow"
				class="mt10 mb10">
					<newBtn
					bgColor="#F2F2F2" 
					color="#808080" 
					name="已经领过了"></newBtn>
				</view>
			</view>
			
			<view class="main_newcomerBenefits_List mt10 pd10">
				<view class="main_newcomerBenefits_List_top">
					<text class="main_newcomerBenefits_yhj_top_left">新人专享优惠</text>
					<view class="main_newcomerBenefits_List_top_image">
						<image
						 style="width: 100%;height: 100%;"
						 :src="xcxImgUrl && xcxImgUrl+'page_activity/static/daojishi.svg'"></image>
						 <text class="main_newcomerBenefits_List_top_image_text">剩余倒计时</text>
						<text class="main_newcomerBenefits_List_top_image_right">4天 20:14:14</text>
					</view>
				</view>
				
				<view >
					<view class="main_newcomerBenefits_List_item mt10 pd10">
						<view class="main_newcomerBenefits_List_item_left">
							<image 
							style="width: 100%;height: 100%;"
							:src="xcxImgUrl && xcxImgUrl+'page_activity/static/xrfl_top.png'"></image>
						</view>
						<view class="main_newcomerBenefits_List_item_right ml5">
							<view class="main_newcomerBenefits_List_item_right_top texttowShow">
								韩国哈辣么皮1-4段婴幼儿奶粉纯正韩国进口优选奶粉...
							</view>
							<view class="main_newcomerBenefits_List_item_right_content mt10">
								红色 / 件
							</view>
							<view class="main_newcomerBenefits_List_item_right_bom mt10">
								￥289 
								<text>新人专享价</text>
							</view>
							<view class="main_newcomerBenefits_List_item_right_sub">
								立即购买
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import newBtn from '@/components/newBtn/newBtn.vue'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		components:{
			newBtn
		},
		data() {
			return {
				statusBarHeight:'',
				height:'',
				linjuanShow:false
			};
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('main_newcomerBenefits')
			})
		},
		methods:{
			//点击领卷
			tapLinjuan(){
				this.linjuanShow = true
			},
			//点击去我的卡卷
			toCardRoll(){
				uni.navigateTo({
					url:'/page_activity/myCardRoll'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.ztl{
	width: 100%;
	background-color:$bg_activity_color;
}
.newcomerBenefits{
	width: 100%;
	height: 100vh;
	background-color: $bg_activity_color;
	box-sizing: border-box;
	
	.main_newcomerBenefits{
		width: 100%;
		box-sizing: border-box;
		
		.main_newcomerBenefits_top{
			display: flex;
			height: 200rpx;
			.main_newcomerBenefits_top_left{
				width: 50%;
				height: 90%;
				color: #FFF;
				font-weight: bold;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				flex-direction: column;
			}
			.main_newcomerBenefits_top_right{
				width: 50%;
				height: 100%;
				display: flex;
				align-items: flex-end;
			}
		}
		.main_newcomerBenefits_yhj{
			width: 100%;
			box-sizing: border-box;
			background-color: #FFF;
			border-radius: $border_radius_10;
			.main_newcomerBenefits_yhj_top{
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $text_color_333;
				.main_newcomerBenefits_yhj_top_left{
					font-weight: bold;
				}
				.main_newcomerBenefits_yhj_top_right{
					font-size: $font_size_12;
				}
			}
			.main_newcomerBenefits_yhj_content{
				height: 200rpx;
				border-radius: $border_radius_10;
				display: flex;
				.main_newcomerBenefits_yhj_content_left{
					width: 30%;
					height: 100%;
					background-color: $bg_activity_color;
					border-radius: $border_radius_10;
					color: #FFF;
					display: flex;
					align-items: center;
					justify-content: center;
					.main_newcomerBenefits_yhj_content_left_left{
						font-size: $font_size_14;
					}
					.main_newcomerBenefits_yhj_content_left_right{
						font-size: 60rpx;
						font-weight: bold;
					}
				}
				.main_newcomerBenefits_yhj_content_right{
					flex: 1;
					background-color: #FFE3E3;
					border-radius: $border_radius_10;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-evenly;
					
					.main_newcomerBenefits_yhj_content_right_one{
						color: $text_color_333;
						font-weight: bold;
					}
					.main_newcomerBenefits_yhj_content_right_tow{
						color: $text_color_808080;
						font-size: $font_size_12;
					}
					.main_newcomerBenefits_yhj_content_right_three{
						color: #999999;
						font-size: $font_size_12;
					}
				}
			}
			
		}
		.main_newcomerBenefits_List{
				width: 100%;
				height: 800rpx;
				box-sizing: border-box;
				background-color: #FFF;
				border-radius: $border_radius_10;
			.main_newcomerBenefits_List_top{
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $text_color_333;
				
				.main_newcomerBenefits_List_top_image{
					width: 60%;
					height: 100%;
					color: #FFF;
					font-size: $font_size_12;
					position: relative;
					.main_newcomerBenefits_List_top_image_text{
						position: absolute;
						left: 13%;
						bottom: 22%;
					}
					.main_newcomerBenefits_List_top_image_right{
						position: absolute;
						color: $text_color_ec4141;
						left: 55%;
						bottom: 22%;
					}
				}
			}
			.main_newcomerBenefits_List_item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 1px solid #F5F5F5;
				.main_newcomerBenefits_List_item_left{
					width: 180rpx;
					height: 180rpx;
				}
				.main_newcomerBenefits_List_item_right{
					position: relative;
					flex: 1;
					.main_newcomerBenefits_List_item_right_top{
						width: 100%;
						font-size: $font_size_12;
						color: $text_color_333;
					}
					.main_newcomerBenefits_List_item_right_content{
						font-size: $font_size_12;
						color:$text_color_808080;
					}
					.main_newcomerBenefits_List_item_right_bom{
						font-size: $font_size_14;
						color:$text_color_ec4141;
						font-weight: bold;
						text{
							font-size: $font_size_12;
							margin-left: 20rpx;
							font-weight: normal;
						}
					}
					.main_newcomerBenefits_List_item_right_sub{
						border-radius: 60rpx;
						padding: 10rpx 20rpx;
						background-color: $bg_activity_color;
						color: #FFF;
						font-size: $font_size_12;
						width: 100rpx;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
		}
	}
}

</style>
